<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="cardBox">
      <div class="filter-container">
        <el-form :inline="true" class="search-form" label-width="80px">
          <el-row style="display: flex">
            <div style="flex: 1">
              <el-form-item label="名称：" style="margin: 5px 0">
                <el-input
                  v-model="searchForm.name"
                  placeholder="请输入名称"
                  clearable
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item label="类型：" style="margin: 5px 0">
                <el-input
                  v-model="searchForm.type"
                  placeholder="请输入类型"
                  clearable
                  class="input-with-select"
                />
              </el-form-item>
              <el-form-item label="状态：" style="margin: 5px 0">
                <el-select
                  clearable
                  class="input-with-select"
                  v-model="searchForm.status"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="margin: 5px 0">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resettingWay"
                  >重置</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-circle-plus-outline"
              @click="addDictionaryWay"
              >添加字典类型</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            :data="dictionaryList"
            style="width: 100%"
          >
            <el-table-column prop="id" align="center" label="ID">
            </el-table-column>
            <el-table-column prop="name" align="center" label="字典名称">
            </el-table-column>
            <el-table-column prop="type" align="center" label="字典类型">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  slot="reference"
                  @click="pathWay(scope.row)"
                >
                  {{ scope.row.type }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 1">已启用</el-tag>
                <el-tag v-else type="danger">已禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" align="center" label="备注">
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              width="180"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  style="margin-right: 10px"
                  type="primary"
                  size="mini"
                  @click="putDictionaryWay(scope.row)"
                >
                  修改
                </el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="delDictionaryWay(scope.row)"
                >
                  <el-button type="danger" size="mini" slot="reference">
                    删除
                  </el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row class="marginTop" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
    <!-- 添加修改字典类型 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogdictionary"
      width="800px"
      @close="closeDialogdictionary"
    >
      <el-row :gutter="20">
        <el-form
          :model="dictionaryForm"
          status-icon
          :rules="rules"
          ref="dictionaryForm"
          label-width="110px"
          class="demo-ruleForm"
        >
          <el-col :span="11">
            <el-form-item label="名称" prop="name">
              <el-input
                type="text"
                placeholder="请输入名称"
                v-model="dictionaryForm.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="类型" prop="type">
              <el-input
                type="text"
                placeholder="请输入类型"
                v-model="dictionaryForm.type"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="状态" prop="status">
              <el-radio v-model="dictionaryForm.status" :label="1"
                >启用</el-radio
              >
              <el-radio v-model="dictionaryForm.status" :label="2"
                >禁用</el-radio
              >
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注" prop="remark">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="dictionaryForm.remark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="btnLoading" @click="dialogdictionary = false"
          >取 消</el-button
        >
        <el-button
          :loading="btnLoading"
          type="primary"
          @click="submitForm('dictionaryForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDictionaryList,
  addDictionary,
  delDictionary,
} from "@/api/admin/dictionary";
export default {
  data() {
    return {
      title: "添加字典类型",
      loading: false,
      btnLoading: false,
      dialogdictionary: false,
      searchForm: {
        name: "",
        type: "",
        status: "",
        page: 1,
        count: 10,
      },
      dictionaryForm: {
        id: "",
        name: "",
        type: "",
        status: 1,
        remark: "",
      },
      options: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 2,
        },
      ],
      dictionaryList: [],
      total: 0,
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("名称不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("类型不能为空"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                return callback(new Error("请选择状态"));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    // 查询字典类型
    getListWay() {
      this.loading = true;
      getDictionaryList(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.total = res.data.total;
          this.dictionaryList = res.data.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 字典类型重置搜索
    resettingWay() {
      (this.searchForm = {
        name: "",
        type: "",
        status: "",
        page: 1,
        count: 10,
      }),
        this.getListWay();
    },
    // 添加字典类型
    addDictionaryWay() {
      this.title = "添加字典类型";
      this.dialogdictionary = true;
    },
    // 添加修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          addDictionary(this.dictionaryForm)
            .then((res) => {
              this.btnLoading = false;
              if (res.code !== 200) {
                this.$messages.error(res.msg);
                return;
              }
              this.closeDialogdictionary();
              this.getListWay();
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 添加修挂弹框关闭
    closeDialogdictionary() {
      this.$refs.dictionaryForm.resetFields();
      this.dialogdictionary = false;
      this.dictionaryForm = {
        id: "",
        name: "",
        type: "",
        status: 1,
        remark: "",
      };
    },
    // 删除 字典类型
    delDictionaryWay(row) {
      delDictionary({ dictionaryId: row.id }).then((res) => {
        if (res.code == 200) {
          this.$messages.success("删除成功");
          this.getListWay();
        } else {
          this.$messages.error(res.msg);
        }
      });
    },
    // 修改 字典类型
    putDictionaryWay(row) {
      this.title = "修改字典类型";
      this.dictionaryForm = JSON.parse(JSON.stringify(row));
      this.dialogdictionary = true;
    },
    // 页面跳转
    pathWay(row) {
      this.$router.push({
        path: "/admin/dictionary/subdictionary",
        query: {
          parentId: row.id,
        },
      });
    },
    // 字典类型切换分页
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
    // 字典类型切换每页数量
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
  },
};
</script>

<style></style>